<template>
    <div id="directive">
      <div id="dir1">
        <input type="text" placeholder="itcast" v-color="color" v-focus/>
      </div>
      <div id="dir2">
        <input type="text" placeholder="itcast" v-color="color"/>
      </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    export default {
      name: "directive",
      data(){
        return{
          num:10,
          color:'red'
        }
      }
    };
    Vue.directive('color',{
      bind:function (el,binding) {
        console.log('1-bind');
        el.style.color = binding.value;
      },
      inserted:function () {
        console.log('2-inserted');
      },
      update:function () {
        console.log('3-update');
      },
      componentUpdated:function () {
        console.log('4-componentUpdate');
      },
      unbind:function () {
        console.log('5-unbind');
      }
    });
    Vue.directive('focus',{
      bind:function (el,binding) {
        el.style.color = binding.value;
      },
      inserted:function (el,binding) {
        el.focus();
      }
    })
</script>

<style scoped>

</style>
